<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>070-HTML5-Web存储-localStorage对象</title>
</head>

<body>
    <!-- localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 -->
    <div id="result"></div>
    <script>
        if (typeof (Storage) !== "undefined") {
            // 存储
            localStorage.setItem("sitename", "菜鸟教程");
            // 查找
            document.getElementById("result").innerHTML = "网站名：" + localStorage.getItem("sitename");
        }
        else {
            document.getElementById("result").innerHTML = "对不起，您的浏览器不支持 web 存储。";
        }
    </script>

    <!-- 使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。 -->
    <!-- 检索键值为 "sitename" 的值然后将数据插入 id="result" 的元素中。 -->

    <!-- 不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）： -->
    <!-- 保存数据：localStorage.setItem(key,value); -->
    <!-- 读取数据：localStorage.getItem(key); -->
    <!-- 删除单个数据：localStorage.removeItem(key); -->
    <!-- 删除所有数据：localStorage.clear(); -->
    <!-- 得到某个索引的key：localStorage.key(index); -->
    <!-- 提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。 -->

</body>

</html>